<template>
    <div class="container" ref="containerRef">
        <!-- 测试 -->
    </div>
</template>

<script setup>

import { ref, reactive, onMounted, onActivated } from 'vue'
import {
    Scene, PerspectiveCamera, WebGLRenderer, Color, AxesHelper, PlaneGeometry, MeshBasicMaterial, Mesh,
    BoxGeometry, SphereGeometry
} from 'three'

const containerRef = ref(null)

// 创建一个场景
const scene = new Scene()

// 创建一个摄像机，所谓摄像机就是模拟人眼从哪个视角（位置开始观察）
// 参数一为角度，参数二为框高比，参数三位观察的最近的距离，参数四为观察最远距离
const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)

// 设置相机摆放的位置分别代表x，y，z的坐标
camera.position.set(-30, 40, 30)

// 设置相机的朝向
camera.lookAt(scene.position)

// 初始化渲染,设置渲染的容器
const renderer = new WebGLRenderer()
// 设置渲染的颜色，这个颜色也可以放rgb的颜色
renderer.setClearColor(new Color(0xeeeeee))
renderer.setSize(window.innerWidth, window.innerHeight)


// 为场景增加一个右手坐标系,参数代表坐标系大小
const axes = new AxesHelper(20)
scene.add(axes)

// 添加一个平面材质 参数为材质大小
const planeGeometry = new PlaneGeometry(60, 20)
// 设置材质颜色
const meshBasicMaterial = new MeshBasicMaterial({ color: 0xcccccc })
const plane = new Mesh(planeGeometry, meshBasicMaterial)
// 设置材质位置
plane.rotation.x = -0.5 * Math.PI
// plane.position.x = 15
// plane.position.y = 0
// plane.position.z = 0
// 增加材质
scene.add(plane)

// 继续增加一个立体矩形材质(这是一个立体的几何体)，三个参数分别代表长宽高，现在三个值相同那么就表示是一个正方体
const cubeGeometry = new BoxGeometry(4, 4, 4)
// wireframe表示填充否，True不填充，false填充
const cubeMaterial = new MeshBasicMaterial({ color: 0xff0000, wireframe: true })
const cube = new Mesh(cubeGeometry, cubeMaterial)
cube.position.set(2, 2, 2)
scene.add(cube)

// 继续增加一个球体材质
const sphereGeometry = new SphereGeometry(4)
const sphereMaterial = new MeshBasicMaterial({
    color: 0x7777ff,
    wireframe: true
})
const sphere = new Mesh(sphereGeometry, sphereMaterial)
sphere.position.x = 20
sphere.position.y = 4
sphere.position.z = 2
scene.add(sphere)

onMounted(() => {

    // 将渲染出来的容器放入到页面中 
    containerRef.value?.appendChild(renderer.domElement)
    // 增加场景,参数一为场景，参数二维相机（其实就是想前面创建的场景跟相机增加进来渲染）
    renderer.render(scene, camera)

})
onActivated(() => {

})


</script>

<style lang='less' scoped>
.container {
    height: 100%;
    width: 100%;
}
</style>